剛開始學JavaScript的時候,在書上看到事件綁定的範例:
//HTML
<a id="link" href="http://yahoo.com">雅虎</a>
//JavaScript
var link = document.getElementById('link');
btn.addEventListener('click', function(e){
e.preventDefault();
console.log('yahoo');
},false);
老師有教preventDefault()是阻止事件的預設行為,讓人在點擊連結的時候,連結沒有發生作用,不會連到雅虎的頁面上去。
但是…但是…那個 e,也就是function(e)括號中的那個e…,還有e.preventDefault()的那個e,到底是從哪來的?
就是這個e把我搞得一頭霧水,頭上三條線!
後來再深入學習,知道當addEventListener()監聽事件發生的時候,瀏覽器會找事件處理器(Event Handler)來執行原本設定要執行的任務,事件處理器就是addEventListener()的第二個參數function的部分。
而那個放在function(e)的 e 就是這個eventListener建立的「事件物件」(event object),裡面放著跟這個事件有關係的所有屬性,並且用參數的方式傳入事件處理器,也就是addEventListener()的第二個參數function中。
<button id="btn">點我...點點我</btn>
var btn = document.getElementById('btn');
btn.addEventListener('click', function(e){
console.log(e);
},false);
當你點了「點我...點點我」,打開瀏覽器控制台的console,點開MouseEvent可以看到所有event物件包含的屬性:
所以我們了解:
這個e是在當事件發生時,事件處理器自動建立的「事件物件」,裡面紀錄了跟事件有關係的資訊,並把這個e當參數傳入事件發生時設定要執行的函式。